<%@page import="qualomelhor.gwt.modules.client.ClientUtils"%>
<%@page import="qualomelhor.database.Avatar"%>
<%@page import="qualomelhor.database.Avatar.Cabelo"%>
<%@page import="qualomelhor.database.Avatar.Roupa"%>
<%@page import="qualomelhor.database.Avatar.Olho"%>

<%
	Avatar avatar;
	String av = request.getParameter("avatar");
	String idDiv = request.getParameter("idDiv");
	String top = request.getParameter("top");
	if (top == null) {
		top = "0";
	}

	System.out.println("av = " + av);

	if (av == null) {
		avatar = ClientUtils.getRandomAvatar();
	} else {
		avatar = Avatar.getAvatar(av);
	}

	if (idDiv == null) {
		idDiv = String.valueOf(Math.round(Math.random() * 10));
	}
	System.out.println("idDiv = " + idDiv);

	Cabelo cab = Cabelo.getCabeloPorId(avatar.getCodParteCabelo());
	System.out.println("cab.getaditional height = " + cab.getAditionalTop());

	Roupa roupa = Roupa.getRoupaPerId(avatar.getCodParteRoupa());

	Olho olho = Olho.getOlhoPerId(avatar.getCodParteOlho());
%>

<script type="text/javascript">
	function trocaOlhar<%=idDiv%>(aproximacaoOlho) {
		var imgOlhoD = document.getElementById("imgOlhoD<%=idDiv%>");
		var imgOlhoE = document.getElementById("imgOlhoE<%=idDiv%>");

		document.getElementById("divOlhoE<%=idDiv%>").style.left = ((58 + aproximacaoOlho) + "px");
		document.getElementById("divOlhoD<%=idDiv%>").style.left = ((102 - aproximacaoOlho) + "px");

		var olhoPos = new Array("_AB.png", "_L.png", "_LI.png", "_LS.png", "_C.png");

		//alert("vai trocar olhar...");
		//alert("img.src:[" + imgOlhoD.src + "]");
		var r = Math.floor(Math.random()*olhoPos.length);

		var inv1 = Math.floor(Math.random()*2);
		inv1 = (inv1 == 1)?1:-1;
		var inv2 = Math.floor(Math.random()*2);
		inv2 = (inv2 == 1)?1:-1;

		var objImg = new Image();
		objImg.src = "/images/avatar/olho/<%=avatar.getCodParteOlho()%>/olho<%=avatar.getCodParteOlho()%>" + olhoPos[r];
		objImg.onload = function() {
			imgOlhoD.src = objImg.src;
			imgOlhoE.src = objImg.src;

			var strScale = new String("scale(" + String(inv1) + ", " + String(inv2) + ")");
			//alert("strScale = " + strScale);

			if (inv1 != 1 && inv2 != 1) {
				imgOlhoD.style.MozTransform = strScale;
				imgOlhoD.style.webkitTransform = strScale;
				imgOlhoD.style.msTransform = strScale;
				imgOlhoD.style.transform = strScale;
				imgOlhoD.style.oTransform = strScale;
				imgOlhoD.style.oTransform = strScale;
				
				imgOlhoE.style.MozTransform = strScale;
				imgOlhoE.style.webkitTransform = strScale;
				imgOlhoE.style.msTransform = strScale;
				imgOlhoE.style.transform = strScale;
				imgOlhoE.style.oTransform = strScale;
				imgOlhoE.style.oTransform = strScale;
			}
		}
		//object.webkitTransform;
		//alert("trocou"); 
		setTimeout("trocaOlhar<%=idDiv%>()",1000);
	}

	function trocaBoca<%=idDiv%>(codParteBoca) {
		var imgBoca = document.getElementById("imgBoca<%=idDiv%>");
		var bocas = new Array("1", "2", "3", "4", "5", "6");

		//alert("vai trocar boca...");
		//alert("img.src:[" + imgOlhoD.src + "]");
		var r = Math.floor(Math.random()*bocas.length);

		//alert("r = " + r);
		imgBoca.src = "/images/avatar/boca/" + codParteBoca + "/boca" + bocas[r] + ".png";
		imgBoca.onload = function() {
			var posBoca = (200 - imgBoca.width) / 2;
			document.getElementById("divBoca<%=idDiv%>").style.left = (posBoca + "px");
		}

		//alert("boca timeout");
		setTimeout("trocaBoca<%=idDiv%>(" + codParteBoca + ")",1000);
	}

	function setPosCabelo<%=idDiv%>(imgSrc, aditionalTop, aditionalLeft) {
		
		//alert("img src = " + imgSrc);
		//alert("cabelo height = " + document.getElementById("cab<%=idDiv%>").style.height);

		var objImg<%=idDiv%> = new Image();
		objImg<%=idDiv%>.src = imgSrc;
		objImg<%=idDiv%>.onload = function() {
			
			//alert("objImg<%=idDiv%>.height = " + objImg<%=idDiv%>.height);
			if (objImg<%=idDiv%>.height > 28) {
				var cabPosY = ((28 - objImg<%=idDiv%>.height) / 2) + aditionalTop;
				document.getElementById("divCabelo<%=idDiv%>").style.top = (cabPosY + "px");
				document.getElementById("divCabelo<%=idDiv%>").style.left = (aditionalLeft + "px");
				document.getElementById("divAvatar<%=idDiv%>").style.top = (parseInt(document.getElementById("divAvatar<%=idDiv%>").style.top) - (cabPosY/4)) + "px";
				//alert("setou a posicao = " + cabPosY);
			} else {
				document.getElementById("divCabelo<%=idDiv%>").style.top = (aditionalTop + "px");
				document.getElementById("divAvatar<%=idDiv%>").style.top = (parseInt(document.getElementById("divAvatar<%=idDiv%>").style.top) - (aditionalTop/4)) + "px";
			}
		}
	}
	
	function setPosRoupa<%=idDiv%>(imgSrc, aditionalTop, aditionalLeft) {
		//alert("img src = " + imgSrc);
		var objImg<%=idDiv%> = new Image();
		objImg<%=idDiv%>.src = imgSrc;
		objImg<%=idDiv%>.onload = function() {
			
			//alert("objImg<%=idDiv%>.width = " + objImg<%=idDiv%>.width);
			var posRoupa = (200 - objImg<%=idDiv%>.width) / 2;
			document.getElementById("divRoupa<%=idDiv%>").style.left = ((posRoupa + aditionalLeft) + "px");
			document.getElementById("divRoupa<%=idDiv%>").style.top = ((118 + aditionalTop) + "px");
			//alert("setou a posicao da roupa..");
		}
	}

	function setPosBoca<%=idDiv%>(imgSrc) {
		//alert("img src = " + imgSrc);
		var objImg<%=idDiv%> = new Image();
		objImg<%=idDiv%>.src = imgSrc;
		objImg<%=idDiv%>.onload = function() {
			
			//alert("objImg<%=idDiv%>.width = " + objImg<%=idDiv%>.width);
			var posBoca = (200 - objImg<%=idDiv%>.width) / 2;
			document.getElementById("divBoca<%=idDiv%>").style.left = (posBoca + "px");
			//alert("setou a posicao da boca..");
		}
	}
</script>

<div id="divAvatar<%=idDiv%>" class="scaleQuarenta" style="position: relative; top: <%=top%>px; width:350px; height: 200px; margin: 0px auto;">

	<div id="divLayerAvatar<%=idDiv%>" style="position: relative; top: 0px; left: 77px;">

		<div id="divCorpo<%=idDiv%>" style="position: absolute; top:0px; left:0px;">
			<img src="/images/avatar/corpo/corpo.png">
		</div>

		<div id="divCabelo<%=idDiv%>" style="position: absolute; top:0px; left:0px;">
			<img id="cab<%=idDiv%>" src="/images/avatar/cabelo/cabelo<%=avatar.getCodParteCabelo()%>.png">
		</div>

		<div id="divSobrancelhaE<%=idDiv%>" style="position: absolute; top: 38px; left: <%=(50 + olho.getAproximacaoOlho())%>px;">
			<img src="/images/avatar/sombrancelha/sobran<%=avatar.getCodParteSobrancelha()%>.png">
		</div>

		<div id="divSobrancelhaD<%=idDiv%>" style="position: absolute; top: 38px; left: <%=(100 - olho.getAproximacaoOlho())%>px; -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);">
			<img src="/images/avatar/sombrancelha/sobran<%=avatar.getCodParteSobrancelha()%>.png">
		</div>

		<div id="divOlhoE<%=idDiv%>" style="position: absolute; top: 46px; left: 58px;">
			<img id="imgOlhoE<%=idDiv%>" src="/images/avatar/olho/<%=avatar.getCodParteOlho()%>/olho<%=avatar.getCodParteOlho()%>_L.png">
		</div>

		<div id="divOlhoD<%=idDiv%>" style="position: absolute; top: 46px; left: 102px;">
			<img id="imgOlhoD<%=idDiv%>" src="/images/avatar/olho/<%=avatar.getCodParteOlho()%>/olho<%=avatar.getCodParteOlho()%>_L.png">
		</div>

		<div id="divBoca<%=idDiv%>" style="position: absolute; top: 94px; left: 0px;">
			<img id="imgBoca<%=idDiv%>"  src="/images/avatar/boca/<%=avatar.getCodParteBoca()%>/boca6.png">
		</div>

		<div id="divRoupa<%=idDiv%>" style="position: absolute; top: 118px; left: 0px;">
			<img src="/images/avatar/roupa/roupa<%=avatar.getCodParteRoupa()%>.png">
		</div>

		<!-- 
		<div id="divMaoE<%=idDiv%>" style="position: absolute; top: 120px; left: 20px;">
			<img src="/images/avatar/mao/mao<%=avatar.getCodParteMao()%>.png">
		</div>
		 -->
		<!--
		<div id="divMaoD<%=idDiv%>" style="position: absolute; top: 120px; left: 130px; -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);">
			<img src="/images/avatar/mao/mao<%=avatar.getCodParteMao()%>.png"">
		</div>
		 -->

	</div>

</div>

<script type="text/javascript">
	trocaOlhar<%=idDiv%>(<%=olho.getAproximacaoOlho()%>);
	trocaBoca<%=idDiv%>(<%=avatar.getCodParteBoca()%>);
	setPosCabelo<%=idDiv%>("/images/avatar/cabelo/cabelo<%=avatar.getCodParteCabelo()%>.png", <%=cab.getAditionalTop()%>, <%=cab.getAditionalLeft()%>);
	setPosRoupa<%=idDiv%>("/images/avatar/roupa/roupa<%=avatar.getCodParteRoupa()%>.png", <%=roupa.getAditionalTop()%>, <%=roupa.getAditionalLeft()%>);
	setPosBoca<%=idDiv%>("/images/avatar/boca/<%=avatar.getCodParteBoca()%>/boca6.png");
</script>